<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="scott">
			班级名称：
			<select  v-model="studentBean.classId">
				<option v-for="c in cList" v-bind:value="c.cid" v-bind:key="c.cid" >
					{{c.cname}}
				</option>
			</select>
			<input type="button" @click="findClassByUser" value="修改" />
		</div>
		
		
	</body>
	
	<script>
		const vue = new Vue({
			el:"#scott",
			data:{
				//模拟多个班级
				cList:[{cid:10,cname:'前端'},{cid:20,cname:'后端'},{cid:30,cname:'UI'}],
				//模拟1个学生
				studentBean:{studentId:'',studentName:'',classId:''}
			},
			created(){
　　　　　　　　　//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
				this.studentBean.classId = this.cList[0].cid;
			},
			methods:{
				findClassByUser:function(){
					//通过学生id查找学生的信息  包括班级id
					let stuBean={
						studentId:10010,
						studentName:"周海燕",
						classId:20,
					};
					this.studentBean.classId=stuBean.classId;
				}
			}
		});
	
	</script>
</html>
